<style scoped>
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-image: url("../../assets/img/img (3).jpg");
  background-size: cover;
}

.register-box {
  width: 500px;
  height: 500px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 20px;
  background-color: rgba(223,212,213,0.2);
  background-size: cover;
}

h2 {
  text-align: center;
  margin-bottom: 20px;
}

.el-form-item{
  display: block;
  margin: 10px 100px;
  font-weight: bolder;
}
.register{
  width: 50%;
  margin: 20px 130px;
  padding: 5px;
}
</style>


<template>
  <div class="register-container">
    <div class="register-box">
      <h2>注册</h2>
        <el-form :model="user" :rules="rules" ref="registerRef">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="user.username" />
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <el-input v-model="user.password" type="password" show-password/>
          </el-form-item>


        <el-form-item label="确认密码" prop="passTwo">
          <el-input v-model="user.passTwo" type="password" show-password />
        </el-form-item>


        <el-form-item label="邮箱" prop="email">
          <el-input v-model="user.email" />
        </el-form-item>


        <el-form-item label="手机号" prop="phone">
          <el-input v-model="user.phone" />
        </el-form-item>

        </el-form>
      <div class="register">
        <el-button type="primary" size="large" style="width: 110px" @click=registerUser>注册</el-button>
        <el-button type="success" size="large" style="width: 110px" @click="$router.push('/user/login')">去登陆</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";
import {userRegister} from "../../apis/UserApi.js";
import router from "../../router/router.js";
import {elPrompt} from "../../utils/elPrompt.ts";

const user=ref({
  username:'',
  password:'',
  passTwo:'',
  email:'',
  phone:'',
})


const registerRef = ref()

const rules=ref({
  username:[{ validator:checkUsername,trigger: 'blur'}],
  password:[{ validator:checkPassword,trigger: 'blur'}],
  passTwo:[{ validator:checkPassTwo,trigger: 'blur'}],
  email:[{ validator:checkEmail,trigger: 'blur'}],
  phone:[{ validator:checkPhone,trigger: 'blur'}],
})

function checkUsername(rule,value,callback){
  const regular = /^[a-zA-Z0-9_]{4,16}$/
  if (value === ''){
    callback(new Error('请输入用户名！'))
  }else if(!regular.test(value)){
    callback(new Error('用户名长度为4-16位！且由字母、数字或下划线组成！'))
  }else{
    callback()
  }
}

function checkPassword(rule,value,callback){
  const regular = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d!@#$%^&*]{6,}$/;
  if (value === ''){
    callback(new Error('请输入密码！'))
  }else if(!regular.test(value)){
    callback(new Error('至少6个字符 包含至少一个大写字母、一个小写字母和一个数字 可以包含特殊字符（例如：!@#$%^&*）'))
  }else{
    callback()
  }
}

function checkEmail(rule,value,callback){
  const regular = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (value === ''){
    callback(new Error('请输入邮箱！'))
  }else if(!regular.test(value)){
    callback(new Error('请输入正确的邮箱格式'))
  }else{
    callback()
  }
}


function checkPhone(rule,value,callback){
  const regular = /^1[3456789]\d{9}$/;
  if (value === ''){
    callback(new Error('请输入手机号！'))
  }else if(!regular.test(value)){
    callback(new Error('请输入正确的手机号格式'))
  }else{
    callback()
  }
}

function checkPassTwo(rule,value,callback){
  if (user.value.password !== value ){
    callback(new Error('两次密码不相同！'))
  }else{
    callback()
  }
}


function registerUser(){
    registerRef.value.validate((valid)=> {
      if (!valid) {
        return
      } else {
        userRegister(user.value, (result) => {
          elPrompt("注册成功","success")
          router.push('/user/login')
        })
      }
    })
}

</script>
